<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed计算属性</title>
</head>
<body>
<div id="app">
  <table>
    <tr>
      <th>商品编号</th>
      <th>商品名称</th>
      <th>商品单价</th>
      <th>商品数量</th>
      <th>合计</th>
    </tr>
    <tr>
      <td>1</td>
      <td>小米10</td>
      <td>{{price}}</td>
      <td>
        <button @click="subtract">-</button>
        {{quantity}}
        <button @click="add">+</button>
      </td>
      <td>{{totalprice}}</td>
    </tr>
  </table>
</div>
<script src="./vue.global.js"></script>
<script>
  const vue=Vue.createApp({
    data(){
      return{
        price:2999,
        quantity:1
      }
    },
    computed:{
      totalprice(){
        return this.price*this.quantity;
      }
    },
    methods:{
      add(){
        this.quantity++;
      },
      subtract(){
        this.quantity--;
      }
    },
    watch:{
      quantity(newVal,oldVal){
        console.log(newVal,oldVal);
        this.quantity =newVal<=0?oldVal:newVal
      }
    }
  }).mount('#app')
</script>
</body>
</html>